<script setup lang="ts">
  import { getPersonal, editPersonal } from '@/api/userCenter';
  import { ref } from 'vue';
  import { useUserStore } from '@/store';
  import { adddoc } from '@/api/dashboard';
  import { FormInstance, Message } from '@arco-design/web-vue';
  import useLoading from '@/hooks/loading';
  import { isArray, omit } from 'lodash';
  import { deepClone } from '@arco-vue-pro-components/pro-components/es/pro-table/utils';
  import { getNetWorkDetail, saveNetWorkDetail } from '@/api/syssetting';
  const formRef = ref<FormInstance | null>(null);
  const userStore = useUserStore();
  const { loading, setLoading } = useLoading(false);
  const formType = ref([
    {
      label: '网站标题',
      name: 'web_name',
      tooltip: '网站主标题',
      fieldProps: {
        span: 12,
        placeholder: '请输入',
        allowClear: true,
      },
      rules: [
        {
          required: true,
          message: '请输入',
        },
      ],
    },
    {
      label: '网站副标题',
      name: 'web_slog',
      fieldProps: {
        span: 12,
        placeholder: '请输入',
        allowClear: true,
      },
      rules: [
        {
          required: true,
          message: '请输入',
        },
      ],
    },
    {
      label: '网站logo',
      name: 'web_logo',
      type: 'a-upload',
      slotName: 'images',
      fieldProps: {
        span: 24,
        multiple: false,
        limit: 1,
        maxCount: 1,
      },
      rules: [
        {
          message: '请选择文件',
          required: true,
        },
      ],
    },
    {
      label: '网站备案信息',
      name: 'web_filing',
      fieldProps: {
        span: 12,
        placeholder: '请输入',
        allowClear: true,
      },
      rules: [
        {
          required: false,
          message: '请输入',
        },
      ],
    },
    {
      label: '网站备案跳转URL',
      name: 'web_filing_url',
      fieldProps: {
        span: 12,
        placeholder: '请输入',
        allowClear: true,
      },
      rules: [
        {
          required: false,
          message: '请输入',
        },
      ],
    },
    {
      label: '版权信息',
      name: 'web_copyright',
      fieldProps: {
        span: 12,
        placeholder: '请输入',
      },
    },
  ]);
  const formState = ref({
    imageUrl: '',
    web_name: '', // 网站名字
    web_logo: '',
    web_slog: '',
    web_filing: '',
    web_filing_url: '',
    web_copyright: '',
  });
  onMounted(() => {
    getDetail();
  });
  function getDetail() {
    getNetWorkDetail({}).then((res) => {
      Object.assign(formState.value, res.data);
      if (formState.value.web_logo) {
        formState.value.imageUrl = deepClone(formState.value.web_logo);
        formState.value.web_logo = [
          {
            url: import.meta.env.VITE_FILE_PATH + formState.value.web_logo,
          },
        ];
      } else {
        formState.value.web_logo = [];
      }
    });
  }

  const handleSubmit = async () => {
    setLoading(true);
    if (!(await formRef.value?.checkForm())) {
      let formData = formRef.value.formModel;
      try {
        if (formData.web_logo[0]?.response) {
          formData.web_logo = formData.web_logo[0].response[0];
        } else {
          formData.web_logo = formData.imageUrl;
        }
        const fidata = omit(formData, 'imageUrl');
        const res = await saveNetWorkDetail({
          ...fidata,
        });
        Message.success(res.msg);
        getDetail();
        setLoading(false);
        window.location.reload();
      } catch (error) {
        setLoading(false);
      }
    }
  };
</script>

<template>
  <div class="container">
    <a-card class="general-card" title="网站设置">
      <div style="width: 70%">
        <pro-form
          :loading="loading"
          ref="formRef"
          :form-json="formType"
          :form-data="formState"
          @search="handleSubmit"
        ></pro-form>
      </div>
    </a-card>
  </div>
</template>

<style scoped lang="less"></style>
